.channel {
  border-radius: 0.25rem;
  height: 3em;
  width: 100%;
  background: #343a40;
  overflow-y: hidden;
  overflow-x: hidden;
  user-select: none;
  transition: width 0.5s ease-out;
}

.channel-title {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.channel-image {
  max-width: 50px;
  max-height: 2em;
}

.channel:hover {
  background: #007bff;
  cursor: pointer;
}

.channel:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(13, 109, 253, 0.7);
}

.playing {
  background: #0048ff;
  animation-name: pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.playing:hover {
  background: #0048ff;
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.disabled {
  opacity: 25%;
}
